{% extends 'workflow_base.html' %}
{% load staticfiles %}

{% block extralmedias %}
<title>进度查看</title>
<style type="text/css">
    .workflow_main{
        width: 100%;
        height: 100%;
    }
    .workflow_main .workflow_left{
        width: 45%;
        height: 100%;
        float: left;
        border-right: 1px solid #e5e5e5;
    }
    .workflow_main .detail{
        width: 53%;
        height: 100%;
        float: right;
        border-left: 1px solid #e5e5e5;
    }
    .detail p{
        margin-bottom: 10px;
    }
    #mynetwork{
        height: 90%
    }
    .history_detail{
        overflow: hidden;
    }
    .history_detail ul{
        list-style: none;
        margin: 12px;
        padding: 5px 10px;
        float: left;
        border: 1px solid #EDEDED;
        width: 50%;
        font-size: 12px;
    }
    .history_detail div{
        width: 100px;
        padding-top: 20px;
        text-align: center;
        font-size: 12px;
        float: left;
    }
</style>
{% endblock %}

{% block content %}
<div class="workflow_main">
    <div class="workflow_left">
        <div class="body_head">进度流程图</div>
        <div id="mynetwork"></div>
    </div>
    <div class="detail">
        <div class="body_head">详情列表</div>
        {% for item in details %}
        <div class="history_detail">
            <div>
                <img src="{{item.image}}" /> <br/>
                <label>{{item.node.name}}</label>
            </div>
            <ul>
                <li>时间：{{item.create_at}}</li>
                <li>状态：{{item.get_status_display}}</li>
                {% if item.approve_person %}
                <li>审批人：{{item.approve_person}}</li>
                {% endif %}
                {% if item.content %}
                <li>备注：{{item.content}}</li>
                {% endif %}
            </ul>
        </div>
        {% endfor %}
    </div>
</div>
<script type="text/javascript">
    var container = document.getElementById('mynetwork');
    var data = {{data|safe}};
    console.log(data);
    function draw() {
        destroy();
        push_data(data);
        gen_network(container);
    }
    function click_fuc(params){
        return false;
    }
    draw();
</script>
{% endblock %}